<template>
	<section class="vbox">
		<section class="scrollable">
			<section class="hbox stretch">
				<aside class="aside-lg bg-light lter b-r">
					<section class="vbox">
						<section class="scrollable">
							<div class="wrapper">
								<div class="text-center m-b m-t">
									<a href="#" class="thumb-lg">
										<img :src="$store.getters['auth/avatar']" alt="..." class="img-circle" height="128" width="128">
									</a>
									<div>
										<div class="h3 m-t-xs m-b-xs">{{ $store.getters['auth/nick'] }}</div>
										<small class="text-muted"><i class="fa fa-map-marker"></i> London, UK</small>
									</div>
								</div>
								<div class="panel wrapper">
									<div class="row text-center">
										<div class="col-xs-6">
											<a href="#">
												<span class="m-b-xs h4 block">245</span>
												<small class="text-muted">粉丝</small>
											</a>
										</div>
										<div class="col-xs-6">
											<a href="#">
												<span class="m-b-xs h4 block">55</span>
												<small class="text-muted">关注</small>
											</a>
										</div>
									</div>
								</div>
								<div class="btn-group btn-group-justified m-b">
									<a class="btn btn-success btn-rounded" data-toggle="button">
										<span class="text">
											<i class="fa fa-eye"></i> 关注
										</span>
										<span class="text-active">
											<i class="fa fa-eye"></i> 已关注
										</span>
									</a>
									<a class="btn btn-dark btn-rounded">
										<i class="fa fa-comment-o"></i> 聊天
									</a>
								</div>
								<div>
									<small class="text-uc text-xs text-muted">关于我</small>
									<p>{{ loggedUser.sex }}</p>
									<small class="text-uc text-xs text-muted">简介</small>
									<p>{{ loggedUser.intr }}</p>
									<div class="line"></div>
									<small class="text-uc text-xs text-muted">联系方式</small>
									<p class="m-t-sm">
										<a href="#" class="btn btn-rounded btn-twitter btn-icon"><i class="fa fa-twitter"></i></a>
										<a href="#" class="btn btn-rounded btn-facebook btn-icon"><i class="fa fa-facebook"></i></a>
										<a href="#" class="btn btn-rounded btn-gplus btn-icon"><i class="fa fa-google-plus"></i></a>
									</p>
								</div>
							</div>
						</section>
					</section>
				</aside>
				<aside class="bg-white">
					<section class="vbox">
						<header class="header bg-light lt">
							<ul class="nav nav-tabs nav-white">
								<li class="active"><a href="#activity" data-toggle="tab">消息</a></li>
								<li class=""><a href="#events" data-toggle="tab">赞过的</a></li>
								<li class=""><a href="#interaction" data-toggle="tab">收藏夹</a></li>
							</ul>
						</header>
						<section class="scrollable">
							<div class="tab-content">
								<div class="tab-pane fade active in" id="activity">
									<ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
										<li class="list-group-item">
											<a href="#" class="thumb-sm pull-left m-r-sm">
												<img src="images/a1.png" class="img-circle">
											</a>
											<a href="#" class="clear">
												<small class="pull-right">1 hour ago</small>
												<strong class="block">Jonathan George</strong>
												<small>Morbi nec nunc condimentum...</small>
											</a>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="events">
									<div class="timeline m-t-lg">
										<article class="timeline-item" v-for="item in likeList">
											<div class="timeline-caption">
												<div class="panel panel-default">
													<div class="panel-body">
														<span class="arrow left"></span>
														<span class="timeline-icon">
															<i class="icon-social-youtube icon time-icon bg-primary" v-if="item.mediaType=='video'"></i>
															<i class="fa fa-music time-icon bg-success" v-else-if="item.mediaType=='audio'"></i>
															<i class="icon icon-notebook time-icon bg-success-ltest" v-else-if="item.mediaType=='book'"></i>
															<i class="fa fa-picture-o time-icon bg-info" v-else></i>
														</span>
														<span class="timeline-date">{{ item.likeTime }}</span>
														<a href="#" class="thumb-sm pull-left m-r-sm">
															<img :src="$api.file.url.view + item.poster" class="img-full">
														</a>
														<a href="#" class="clear">
															<small class="pull-right">1 hour ago</small>
															<strong class="block">{{ item.title }}</strong>
															<small>{{ item.author }}</small>
														</a>
													</div>
												</div>
											</div>
										</article>
										<div class="timeline-footer"><a href="#"><i class="fa fa-angle-double-down time-icon inline-block bg-success"></i></a></div>
									</div>
								</div>
								<div class="tab-pane fade" id="interaction">
									<div class="text-center wrapper">
										<i class="fa fa-spinner fa fa-spin fa fa-large"></i>
									</div>
								</div>
							</div>
						</section>
					</section>
				</aside>
				<aside class="col-lg-3 b-l">
					<section class="vbox">
						<section class="scrollable padder-v">
							<div class="panel">
								<h4 class="font-thin padder">浏览记录 </h4>
								<ul class="list-group">
									<li class="list-group-item">
										<p>Wellcome <a href="#" class="text-info">@Drew Wllon</a> and play this web application template, have fun1
										</p>
										<small class="block text-muted"><i class="fa fa-clock-o"></i> 2 minuts ago</small>
									</li>
									<li class="list-group-item">
										<p>Morbi nec <a href="#" class="text-info">@Jonathan George</a> nunc condimentum ipsum dolor sit amet,
											consectetur</p>
										<small class="block text-muted"><i class="fa fa-clock-o"></i> 1 hour ago</small>
									</li>
									<li class="list-group-item">
										<p><a href="#" class="text-info">@Josh Long</a> Vestibulum ullamcorper sodales nisi nec adipiscing elit.
											Morbi id neque quam. Aliquam sollicitudin venenatis</p>
										<small class="block text-muted"><i class="fa fa-clock-o"></i> 2 hours ago</small>
									</li>
								</ul>
							</div>
							<div class="panel clearfix">
								<div class="panel-body">
									<a href="#" class="thumb pull-left m-r">
										<img src="images/a0.png" class="img-circle">
									</a>
									<div class="clear">
										<a href="#" class="text-info">@Mike Mcalidek <i class="fa fa-twitter"></i></a>
										<small class="block text-muted">2,415 followers / 225 tweets</small>
										<a href="#" class="btn btn-xs btn-success m-t-xs">Follow</a>
									</div>
								</div>
							</div>
						</section>
					</section>
				</aside>
			</section>
		</section>
	</section>
</template>

<script>
	import defaultAvatar from '@/assets/images/default_avatar.jpg'
	export default {
		data() {
			return {
				keywords: '',
				loggedUser: {},
				logoutUser: {
					id: null,
					username: '',
					nick: '请登录',
					poster: defaultAvatar
				},
				likeList: []
			}
		},
		mounted() {
			this.$api.userMediaFavor.query({
				userId: this.$store.state.auth.userId,
				favor: 'LIKE'
			}).then(data => {
				for (let i = 0; i < data.rows.length; i++) {
					console.debug("data.rows[i].mediaId", data.rows[i].mediaId);
					this.$api.media.queryById(data.rows[i].mediaId).then(item => {
						item.likeTime = data.rows[i].updateTime;
						this.likeList.push(item);
					});
				}
			});
		}
	}
</script>

<style>
	.timeline::before {
		width: 0;
	}

	.timeline-item,
	.timeline-footer {
		display: block;
		border-left: thin dashed black;
		margin-left: 15%;
		margin-right: 10%;
	}

	.timeline-footer a {
		display: block;
		text-align: left;
		margin-left: -16px;
	}
</style>
